<template>
    <span ref="countUp" @countUpStart="countUpStart">
        <slot></slot>
    </span>
</template>

<script>
    import CountUp from 'countup.js'
    export default {
        props:{
            useEasing:{
                type:Boolean,
                default:true,
            },
            useGrouping:{
                type:Boolean,
                default:true,
            },
            separator:{
                type:String,
                default:'',
            },
            prefix:{
                type:String,
                default:'',
            },
            decimal:{
                type:String,
                default:'',
            },
            suffix:{
                type:String,
                default:'',
            },
            start:{
                type:Number,
                default:0,
            },
            end:{
                type:Number,
                default:1314,
            },
            radixPpoint:{
                type:Number,
                default:0,
            },
            time:{
                type:Number,
                default:2.5
            },
            countUpStart:{
                type:Boolean,
                default:true
            }
        },
        data(){
            return {
                options:{
                    useEasing: this.useEasing, //使用缓动
                    useGrouping: this.useGrouping, //使用分组
                    separator: this.separator, //分隔器
                    prefix: this.prefix, //字首
                    decimal: this.decimal, //十进制
                    suffix:this.suffix,  //后缀
                }
            }
        },
        mounted () {
            this.$nextTick(() => {
                let {start,end,radixPpoint,time,options} = this;
                this.countUp = new CountUp(this.$refs.countUp,start,end,radixPpoint,time,options)
                this.countUpStart && this.countUp.start();
            })
        },
        watch: {
            countUpStart(val){
                if(val) this.countUp && this.countUp.start();
            }
        }
    }

</script>
